<template>
    <div class="event-maintenance">
        <div style="display: flex;flex-direction: row;width: 50%">
            <el-tree ref="eventTree"
                     :data="events"
                     :expand-on-click-node="false"
                     :props="defaultProps"
                     class="eventTree"
                     default-expand-all
                     node-key="label"
                     @node-click="handleEventNodeClick">
                    <span slot-scope="{ node, data }" class="custom-tree-node" style="margin: 40px 10px">
                        <span>{{ node.label }}</span>
                        <span>
                            <el-button
                                icon="el-icon-plus"
                                size="medium"
                                type="text"
                                v-show="!node.isLeaf"
                                @click="append(node, data)"></el-button>
                            <el-button
                                icon="el-icon-delete"
                                size="medium"
                                type="text"
                                @click="remove(node, data)"></el-button>
                        </span>
                    </span>
            </el-tree>
            <div style="margin-left: 50px;display: flex;flex-direction: column">
                <span style="font-size: 24px">{{ currentNodePath }}</span>
                <div style="margin: 20px">
                    <el-button size="medium" type="primary" @click="handleEventAddition">新建</el-button>
                    <el-button size="medium" type="danger"
                               @click="handleEventDelete"
                               :disabled="currentNode===null">删除</el-button>
                </div>
            </div>
        </div>
        <div style="margin: auto 100px;display: flex">
            <el-form :model="selectedEvent" label-width="80px">
                <el-form-item label="事件类型:" prop="type">
                    <el-input v-model="selectedEvent.type" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="事件名称:" prop="name">
                    <el-input v-model="selectedEvent.name" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="事件等级:" prop="level">
                    <el-input v-model="selectedEvent.level" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="事件编号:" prop="number">
                    <el-input v-model="selectedEvent.number" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="事件备注:" prop="desc">
                    <el-input v-model="selectedEvent.desc" :autosize="{minRows:2,maxRow:4}"
                              type="textarea"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-dialog :visible.sync="dialogFormVisible"
                   title="新增"
                   width="60%">
            <el-form ref="eventForm" :model="newEvent" :rules="rules" class="eventForm">
                <el-form-item label="事件类型:" prop="type">
                    <el-select v-model="newEvent.type" :disabled="typeDisabled" @change="handleTypeChange">
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.label"
                            :label="item.label"
                            :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="事件名称:" prop="name">
                    <el-select v-model="newEvent.name" :disabled="nameDisabled">
                        <el-option
                            v-for="item in nameOptions"
                            :key="item.label"
                            :label="item.label"
                            :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="事件等级:" prop="level">
                    <el-input v-model="newEvent.level" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="事件编号:" prop="number">
                    <el-input v-model="newEvent.number" disabled></el-input>
                </el-form-item>

                <el-form-item label="事件备注:" prop="desc">
                    <el-input v-model="newEvent.desc" :autosize="{minRows:2,maxRow:4}"
                              type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleDialogCancel">取 消</el-button>
                <el-button type="primary" @click="handleDialogEnter">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="secondDialog"
                   title="新增"
                   width="30%">
            <el-form :model="selectObj" :rules="rules">
                <el-form-item label="事件:" prop="value">
                    <el-input v-model="selectObj.value"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="secondDialog = false">取 消</el-button>
                <el-button type="primary" @click="handleSecondDialogEnter">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import variables from "@/assets/variables";

export default {
    name: "EventMaintenance",
    data() {
        return {
            events: [],
            typeOptions: [],
            nameOptions: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            currentNode: null,
            selectedEvent: {},
            newEvent: {},
            currentNodePath: "节点路径",
            dialogFormVisible: false,
            typeDisabled: false,
            nameDisabled: false,
            rule: { required: true, message: '必填', trigger: 'blur' },
            rules: {
                level: [],
                type: [],
                name: [],
            },
            selectObj: {},
            secondDialog: false,
            node: null,
            data: null,
        }
    },
    methods: {
        handleEventNodeClick(obj, node) {
            this.currentNode = node;
            this.computedNodePath(this.currentNode)
            this.verifyEvent(node);
        },
        computedNodePath(node) {
            let path = [];
            while (node !== null && node.parent !== null) {
                path.push(node.label)
                node = node.parent;
            }
            this.currentNodePath = path.reverse().join(" >> ")
        },
        addNode() {
            const TMP = {
                label: new Date().getTime().toString(),
                children: [],
                icon: "el-icon-plus"
            }
            this.$refs.eventTree.append(TMP, this.currentNode.parent)
        },
        verifyEvent(node) {
            if (node.isLeaf) {
                const paths = this.currentNodePath.split(" >> ");
                this.selectedEvent = {
                    type: paths[0],
                    name: paths[1],
                    level: paths[2],
                    number: node.data.number,
                    desc: node.data.desc,
                }
            } else {
                this.selectedEvent = {};
            }
        },
        handleEventAddition() {
            this.rules =  {
                level: [],
                type: [],
                name: [],
            }
            this.dialogFormVisible = true;
            this.newEvent = {
                number: new Date().getTime().toString(),
            }
            const arr = this.currentNodePath.split(" >> ");
            if (arr.length === 1) {
                if (arr[0] !== "节点路径") {
                    this.newEvent.type = arr[0];
                    this.typeDisabled = true;
                } else {
                    this.rules.type.push(this.rule);
                }
                this.rules.name.push(this.rule);
                this.rules.level.push(this.rule);
                for (let i in variables.nameOptions) {
                    if (variables.nameOptions[i].label === this.newEvent.type) {
                        this.nameOptions = variables.nameOptions[i].children;
                        break;
                    }
                }
            } else {
                this.newEvent.type = arr[0];
                this.typeDisabled = true;
                for (let i in variables.nameOptions) {
                    if (variables.nameOptions[i].label === this.newEvent.type) {
                        this.nameOptions = variables.nameOptions[i].children;
                        break;
                    }
                }
                this.newEvent.name = arr[1];
                this.nameDisabled = true;
                this.rules.level.push(this.rule);
            }
        },
        handleEventDelete() {
            this.remove(this.currentNode,this.currentNode.data);
        },
        handleTypeChange(v) {
            for (let i in variables.nameOptions) {
                if (variables.nameOptions[i].label === v) {
                    this.nameOptions = variables.nameOptions[i].children;
                    break;
                }
            }
            delete this.newEvent.name;
        },
        handleDialogCancel() {
            this.typeDisabled = false;
            this.nameDisabled = false;
            this.dialogFormVisible = true;
        },
        handleDialogEnter() {
            this.$refs["eventForm"].validate((valid) => {
                if (valid) {
                    this.$message({
                        type: "success",
                        message: "添加成功"
                    })
                    let tmp = {
                        value: this.newEvent.level,
                        label: this.newEvent.level,
                        icon: "el-icon-document",
                        number: this.newEvent.number,
                        desc: this.newEvent.desc,
                    }
                    this.$refs.eventTree.append(tmp, this.newEvent.name);
                    this.newEvent = {};
                    this.typeDisabled = false;
                    this.nameDisabled = false;
                    this.dialogFormVisible = false;
                } else {
                    return false;
                }
            });
        },
        append(node, data) {
            this.node = node;
            this.data = data;
            this.secondDialog = true;
        },

        handleSecondDialogEnter() {
            let newChild = {
                label: this.selectObj.value,
                value: this.selectObj.value,
                children: []
            };
            if (this.node.level===2) {
                newChild.number = new Date().getTime().toString();
                newChild.desc = "无";
            }
            if (!this.data.children) {
                this.$set(this.data, 'children', []);
            }
            this.data.children.push(newChild);
            this.secondDialog = false;
            this.selectObj = {};
        },

        remove(node, data) {
            console.log(node)
            console.log(data);
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.value === data.value);
            children.splice(index, 1);
            this.$message({
                type: "success",
                message: "删除成功"
            })
        },
    },

    mounted() {
        this.events = variables.events;
        this.typeOptions = variables.typeOptions;
    },
}
</script>

<style scoped>
.event-maintenance {
    display: flex;
    flex-direction: row;
}

.eventTree {
    width: 35%;
}

.eventTree >>> .el-tree-node__content {
    height: 36px;
}

.eventForm {
    height: 300px;
}

.eventForm >>> .el-form-item {
    display: inline-block;
    width: 253px;
    float: left;
    margin: 5px 15px;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

</style>